/**
 * Author: Shen Yanqiu
 * Date: 2017-12-18
 * Time: 14:08
 *
 */
import React from 'react';
import { Upload, message, Button, Row, Col, Layout } from 'antd';
import { connect } from "dva";
import { Link } from 'react-router-dom';
import styles from './BaseInfo.less';
import moment from "moment/moment";
import Page from "../../../components/Page";
import PropTypes from "prop-types";

const { Sider, Content } = Layout;
class BaseInfo extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    accountmanagement: PropTypes.object,
    app: PropTypes.object,
    user: PropTypes.object,
  };
  state = {
    imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  };
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  handleChange = (info) => {
    // this.setState({ fileList: info.fileList });
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      console.log(info.file);
      this.getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
      }));
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  render () {
    const { imageUrl } = this.state;
    const { loading, app, user } = this.props;
    const props = {
      name: 'file',
      listType: 'picture-card',
      action: '//jsonplaceholder.typicode.com/posts/',
      headers: {
        authorization: 'authorization-text',
      },
      showUploadList: false,
      onChange: this.handleChange,
    };
    const changeAvatar = () => {
      console.log(this.avatar);
      this.avatar.click();
    };
    return (
      <Page loading={loading.effects['accountmanagement/laterSomeSecond']}>
        <div className={styles.baseInfo}>
          <Row>
            <Col span={2} />
            <Col span={22}>
              <Col span={5}>
                <Upload {...props}>
                  <img src={imageUrl} alt="" className={styles.avatarImg} ref={(avatar) => { this.avatar = avatar; }} />
                </Upload>
                <Button onClick={changeAvatar} className={styles.btn} >
                  修改头像
                </Button>
              </Col>
              <Col span={14}>
                <p>登录账号：{user.userInfo.Mobile}</p>
                <p>注册时间：{moment(user.userInfo.CreatedAt).format("YYYY-MM-DD HH:mm:ss")}</p>
              </Col>
            </Col>
          </Row>
        </div>
      </Page>
    );
  }
}
export default connect(({ loading, accountmanagement, user, app }) => ({ loading, accountmanagement, user, app }))(BaseInfo);
